<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getInfo } from '@/api/login'
import { modify } from '@/api/user'
import type { UserInfo } from '@/api/login/type'
import type { BaseResponse } from '@/api/base'
import { toast } from '@/utils/common'
import { AuthStatus, AuthStatusTag } from './common'

const userInfo = ref<UserInfo>({
  nickname: '',
  gender: 1,
  genderDesc: '',
  phone: '',
  avatar: '',
  authStatus: 0,
})
const actions = ref([
  {
    name: '男',
    value: 1
  },
  {
    name: '女',
    value: 2
  }
])
const sexSelectRef = ref()
const userInfoRef = ref()
const userInfoRule = ref({
  nickname: [
    {
      required: true,
      message: '请输入昵称',
      trigger: ['blur']
    },
    {
      min: 2,
      max: 10,
      message: '昵称长度为2-10个字符',
      transform: (value: string) => value?.trim(),
      trigger: ['blur']
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['blur']
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号格式错误',
      trigger: ['blur']
    }
  ]
})

const loadInfo = async () => {
  const res: BaseResponse = await getInfo()
  userInfo.value = res.data
  userInfo.value.genderDesc = userInfo.value.gender === 1 ? '男' : '女'
}
onLoad(async () => {
  await loadInfo()
})
uni.$on('backRefresh', () => {
  loadInfo()
})

const sexSelect = (e: any) => {
  userInfo.value!.gender = e.value
  userInfo.value.genderDesc = userInfo.value.gender === 1 ? '男' : '女'
}
const showSexSelect = () => {
  sexSelectRef.value.open()
}
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res: any) => {
      userInfo.value.avatar = res.tempFilePaths[0]
    }
  })
}
const saveUserInfo = async () => {
  try {
    const valid = await userInfoRef.value?.validate()
    if (!valid) {
      return
    }
    if (!userInfo.value.gender) {
      toast('请选择性别')
      return
    }
    if (!userInfo.value.avatar) {
      toast('请上传头像')
      return
    }
    const res: BaseResponse = await modify(userInfo.value)
    uni.showToast({
      title: res.tips,
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 500)
      }
    })
  } catch (error) {
    toast(error.tips)
  }
}

</script>

<template>
  <view class="userinfo">
    <uv-form class="userinfo-form" ref="userInfoRef" :model="userInfo" :rules="userInfoRule" labelWidth="80">
      <uv-form-item label="头像" prop="avatar" borderBottom>
        <my-avatar size="40" :src="userInfo.avatar" @click="chooseAvatar"></my-avatar>
      </uv-form-item>
      <uv-form-item label="昵称" prop="nickname" borderBottom>
        <uv-input v-model="userInfo.nickname" border="none" inputAlign="right"></uv-input>
      </uv-form-item>
      <uv-form-item label="性别" prop="gender" borderBottom @click="showSexSelect">
        <uv-input v-model="userInfo.genderDesc" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
          inputAlign="right">
        </uv-input>
        <template v-slot:right>
          <uv-icon name="arrow-right"></uv-icon>
        </template>
      </uv-form-item>
      <uv-form-item label="手机号" prop="phone" borderBottom>
        <uv-input v-model="userInfo.phone" border="none" inputAlign="right"></uv-input>
      </uv-form-item>
    </uv-form>
    <uv-list class="userinfo-extra">
      <uv-list-item title="认证信息" :show-extra-icon="true" :extra-icon="{ icon: 'account', color: 'red' }" link
        to="/pages/my/student">
        <template #footer>
          <uv-tags size="mini" :text="AuthStatus[userInfo.authStatus]"
            :type="AuthStatusTag[userInfo.authStatus]"></uv-tags>
        </template>
      </uv-list-item>
      <uv-list-item title="收货地址" :show-extra-icon="true" :extra-icon="{ icon: 'map', color: '#409eff' }" link
        to="/pages/address/index"></uv-list-item>
    </uv-list>
    <uv-button type="primary" color='#ff7744' text="提交" class="userinfo-btn" @click="saveUserInfo"></uv-button>
    <uv-action-sheet ref="sexSelectRef" :actions="actions" title="请选择性别" @select="sexSelect">
    </uv-action-sheet>
  </view>
</template>

<style lang="scss" scoped>
.userinfo {

  .userinfo-form {
    padding: 0 20rpx;
    background-color: #fff;

    ::v-deep .uv-form-item__body__right__content__slot {
      justify-content: flex-end;
    }

  }

  .uv-list-item ::v-deep .uv-tags-wrapper {
    margin: auto 0;
  }

  .userinfo-extra {
    margin-top: 20rpx;
    background-color: #fff;
  }

  .userinfo-btn {
    margin-top: 40rpx;
    padding: 0 20rpx;
  }
}
</style>
